import {
    Card,
    Breadcrumb,
    Form,
    Button,
    Radio,
    Input,
    Upload,
    Space,
    Select, message
} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import {Link, useNavigate, useSearchParams} from 'react-router-dom'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import {useEffect, useState} from "react";
import './index.scss'
import {addArticle, editArticle, getArticleById} from "@/api/publish";
import {useChannel} from "@/hook/useChannel";

const { Option } = Select

const Publish = () => {
    const navigate = useNavigate()
    const [searchParams] = useSearchParams()
    const articleId = searchParams.get('id')
    const {channelList} = useChannel()
    const [form] = Form.useForm()
    const [imageList, setImageList] = useState([])
    const [imageType, setImageType] = useState(1)
    const onFinish = async (formValue) => {
        if (imageList.length === imageType) {
            const params = {
                id: articleId,
                ...formValue,
                cover: {
                    type: imageType,
                    images: imageList.map(item => item.response ? item.response.data.url : item.url)
                }
            }
            if (articleId) await editArticle(params)
            else await addArticle(params)
            message.success('发布成功')
            navigate('/article')
        } else {
            message.warning('封面类型与图片数量不符')
        }
    }
    const onUploadChange = ({fileList}) => {
        setImageList(fileList)
    }
    const onTypeChange = e => {
        setImageType(e.target.value)
    }
    useEffect(() =>  {
        const getDetail = async () => {
            const {data} = await getArticleById(articleId)
            form.setFieldsValue({
                ...data,
                type: data.cover.type
            })
            setImageType(+data.cover.type)
            setImageList(data.cover.images.map(url => ({ url })))
        }
        if (articleId) getDetail()
    }, [articleId, form]);
    return (
        <div className="publish">
            <Card
                title={
                    <Breadcrumb items={[
                        { title: <Link to={'/'}>首页</Link> },
                        { title: articleId ? '编辑文章' : '发布文章' },
                    ]}
                    />
                }
            >
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ type: 1 }}
                    onFinish={onFinish}
                    form={form}
                >
                    <Form.Item
                        label="标题"
                        name="title"
                        rules={[{ required: true, message: '请输入文章标题' }]}
                    >
                        <Input placeholder="请输入文章标题" style={{ width: 400 }} />
                    </Form.Item>
                    <Form.Item
                        label="频道"
                        name="channel_id"
                        rules={[{ required: true, message: '请选择文章频道' }]}
                    >
                        <Select placeholder="请选择文章频道" style={{ width: 400 }}>
                            {
                                channelList.map(({id, name}) => (
                                    <Option key={id} value={id}>{name}</Option>
                                ))
                            }

                        </Select>
                    </Form.Item>
                    <Form.Item label="封面">
                        <Form.Item name="type">
                            <Radio.Group onChange={onTypeChange}>
                                <Radio value={1}>单图</Radio>
                                <Radio value={3}>三图</Radio>
                                <Radio value={0}>无图</Radio>
                            </Radio.Group>
                        </Form.Item>
                        {
                            imageType > 0 &&
                            <Upload
                                name="image"
                                listType="picture-card"
                                showUploadList
                                action={'http://geek.itheima.net/v1_0/upload'}
                                onChange={onUploadChange}
                                maxCount={imageType}
                                fileList={imageList}
                            >
                                <div style={{ marginTop: 8 }}>
                                    <PlusOutlined />
                                </div>
                            </Upload>
                        }
                    </Form.Item>
                    <Form.Item
                        label="内容"
                        name="content"
                        rules={[{ required: true, message: '请输入文章内容' }]}
                    >
                        <ReactQuill className="publish-quill" theme="snow" placeholder="请输入文章内容" />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 4 }}>
                        <Space>
                            <Button size="large" type="primary" htmlType="submit">
                                发布文章
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Publish
